<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
  <meta name="generator" content="Hugo 0.98.0" />

  
  <meta name="description" content="走在通往幸福的路上">
  

  
  <link rel="apple-touch-icon" sizes="180x180" href="https://blog.v5u.win/apple-touch-icon.png">

  
  <link rel="icon" type="image/png" sizes="32x32" href="https://blog.v5u.win/favicon-32x32.png">

  
  <link rel="icon" type="image/png" sizes="16x16" href="https://blog.v5u.win/favicon-16x16.png">

  
  <link rel="manifest" href="https://blog.v5u.win/site.webmanifest">

  
  <link rel="mask-icon" href="https://blog.v5u.win/safari-pinned-tab.svg" color="">

  <meta name="msapplication-TileColor" content="">

  <meta name="theme-color" content="">

  
  <link rel="stylesheet" href="https://blog.v5u.win/css/bootstrap.min.css" />

  
  <title>Flutter 布局 滚动Widget | 为吾优</title>
  

  <style>
body {
  min-width: 300px;
}

.custom-navbar {
  margin-bottom: 1em;
  height: 60px;
}

.custom-navbar a {
  display: inline-block; 
  padding: 18px 0;
  margin-right: 1em; 
  font-weight: bold; 
}

.custom-navbar a:hover,
.custom-navbar a:focus {
  text-decoration: none; 
}

@media print {
  .custom-navbar {
    display: none;
  }
}

article {
  padding-bottom: 1em;
}

img {
  max-width: 100%;
}


body {
  background-color: #fff;
}



body {
  color: #212529;
}



a {
  color: #007bff;
}



a:hover,
a:focus {
  color: #0056b3;
}



.custom-navbar {
  background-color: #212529;
}



.custom-navbar a {
  color: rgba(255,255,255,.75);
}



.custom-navbar a:hover,
.custom-navbar a:focus {
  color: rgba(255,255,255,1);
}



.container {
  max-width: 800px;
}





</style>
</head>

<body>
  <nav class="custom-navbar">
  <div class="container">
    
    <a href="/">文章</a>
    
    <a href="/tags/">标签</a>
    
    <a href="/about/">关于</a>
    
    <a href="/index.xml">RSS</a>
    
  </div>
</nav>
  
  <div class="container">
    <article>
      <h1>Flutter 布局 滚动Widget</h1>
<p>ListView：tableView</p>
<p>GridView ：collectionView</p>
<p>sliver: 本质是这个sliver</p>
<p>ListView构造函数：</p>
<p>ListView.separated</p>
<p>ListView.builder</p>
<p>ListView.custom</p>
<p>GridView构造函数：</p>
<p>GridView()</p>
<p>GridView.count()</p>
<p>GridView.extent()</p>
<p>GridView.builder()</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-dart" data-lang="dart"><span style="display:flex;"><span>Widget build(BuildContext context) {
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">return</span> ListView.builder(<span style="color:#75715e">// 展示的时候在加载
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    itemExtent: <span style="color:#ae81ff">60</span>,<span style="color:#75715e">// cell 高度
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    itemCount: <span style="color:#ae81ff">100</span>,<span style="color:#75715e">// item数量
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    itemBuilder: (BuildContext context, <span style="color:#66d9ef">int</span> index){<span style="color:#75715e">// 返回的cell
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      <span style="color:#66d9ef">return</span> Text(<span style="color:#e6db74">&#34;</span><span style="color:#e6db74">$</span>index<span style="color:#e6db74">&#34;</span>);
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>  );
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-dart" data-lang="dart"><span style="display:flex;"><span>Widget build(BuildContext context) {
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">return</span> ListView(
</span></span><span style="display:flex;"><span>    scrollDirection: Axis.horizontal,<span style="color:#75715e">// 设置水平滚动，
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    itemExtent: <span style="color:#ae81ff">100</span>,<span style="color:#75715e">// 设置水平滚动，需要设置该值
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    children: List.generate(<span style="color:#ae81ff">100</span>, (index) {
</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">return</span> ListTile(
</span></span><span style="display:flex;"><span>        leading: Icon(Icons.people),
</span></span><span style="display:flex;"><span>        trailing: Icon(Icons.delete),
</span></span><span style="display:flex;"><span>        title: Text(<span style="color:#e6db74">&#34;联系人</span><span style="color:#e6db74">${</span>index<span style="color:#f92672">+</span><span style="color:#ae81ff">1</span><span style="color:#e6db74">}</span><span style="color:#e6db74">&#34;</span>),
</span></span><span style="display:flex;"><span>        subtitle: Text(<span style="color:#e6db74">&#34;电话号码：18800000000&#34;</span>),
</span></span><span style="display:flex;"><span>      );
</span></span><span style="display:flex;"><span>    }),
</span></span><span style="display:flex;"><span>  );
</span></span></code></pre></div><p>传入回调函数，一般来讲都是，需要时才会加载回调函数。</p>

    </article>
  </div>

  
  
  

  
</body>

</html>